<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="团队管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()" right-text="设置"
				@clickRight="$util.toUrl('/pages/newstore/teamset')"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="store-card">
			<view class="store-info flex_r_between">
				<view class="left flex_center">
					<view class="avatar">
						<image :src="info.avatar" mode="aspectFill"></image>
					</view>
					<view class="name hidden">
						{{ info.store_name }}
					</view>
					<view class="certification-image" @click="$util.previewImage([info.business_license_img],0)"
						v-if="info.business_license_img">
						<image :src="$util.prefix('newstore/certification_icon.png')" mode="aspectFill"></image>
					</view>
				</view>

				<view class="right" @click="$util.previewImage([info.store_qr],0)">
					<image :src="info.store_qr" mode="aspectFill"></image>
				</view>
			</view>

			<view class="store-sign hidden_2">
				{{ info.signature }}
			</view>

			<view class="store-url flex_center">
				<view class="left">
					<text>店铺链接</text>
					<view class="hidden">{{ url_link }}</view>
				</view>
				<view class="right" @click="$util.onCopy(url_link)">
					<button>复制</button>
				</view>
			</view>

			<view class="store-btn flex_center">
				<button @click="$native.toShareUrl({
						url: url_link,
						avatar: info.avatar,
						name: info.store_name,
						sign: info.signature,
					})">链接邀请</button>
				<!-- <button @click="show = true">手机号邀请</button> -->
			</view>

		</view>

		<view class="tab flex_r_around">
			<u-tabs :list="tabList" lineColor="#FD2A53" :itemStyle="{width: '300rpx' , height: '80rpx'}" :activeStyle="{
				color: '#131313',
				fontWeight: '500'
			}" @change="onTab"></u-tabs>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="user-info flex_r_between">
					<view class="left flex_center">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>

						<view class="text">
							<view class="nickname flex_center">
								<text>{{ item.nickname }}</text>
								<image :src="$util.prefix('public/lf_owner_icon_v10_tech.png')" mode="aspectFill"
									v-if="item.certificate" @click.stop="$util.previewImage([item.certificate],0)">
								</image>
								
								<view @click="toDetail(item)">
									查看主页
								</view>
							</view>
							<view class="mobile">
								{{ item.mobile }}
							</view>
						</view>

					</view>

					<view class="right" @click="beforeDelete(item)" v-if="item.status == 2">
						<u-icon name="more-dot-fill" color="#515151" size="36rpx" bold></u-icon>
					</view>
				</view>

				<view class="order-num flex_center">
					<view class="order-item flex_c">
						<view>{{ item.history_order_num || 0 }}</view>
						<text>历史接单</text>
					</view>
					<view class="order-item flex_c">
						<view>{{ item.today_order_num || 0 }}</view>
						<text>今日接单</text>
					</view>
					<view class="order-item flex_c">
						<view>{{ item.month_order_num || 0 }}</view>
						<text>本月接单</text>
					</view>
					<view class="order-item flex_c">
						<view>{{ item.history_refund_order_num || 0 }}</view>
						<text>历史退单</text>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="!list.length"></empty>
		

		<!-- 添加员工弹窗 -->
		<!-- add_staff_bg -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="center" bgColor="transparent" @close="close">
			<view class="addStaff flex_c">
				<input type="text" v-model="mobile" placeholder="请输入员工手机号" placeholder-class="input-placeholder" />
				<view class="btn_view" @click="addStaff">添加</view>
				<view class="close" @click="show = false">
					<u-icon name="close-circle" color="#FFF" size="28"></u-icon>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :actions="delete_list" :closeOnClickOverlay="true" :closeOnClickAction="true" :show="show_menu"
			cancelText="关闭" @close="show_menu = false" @select="onDetelePeople"></u-action-sheet>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty
		},
		data() {
			return {
				info: {},

				list: [],
				page: 1,
				total: 1,

				show: false,
				mobile: '',

				delete_list: [{
					name: '移除'
				}],
				show_menu: false,
				provider_id: 0,

				url_link: '',

				tabList: [{
					name: '全部员工',
					status: 0,
				}, {
					name: '待审核员工',
					status: 1,
				}],
				
				status: 0,
			}
		},
		methods: {
			onTab(e){
				this.status = e.status;
				
				this.list = [];
				this.page = 1;
				this.getStoreProviderList();
			},
			
			getStoreProviderList() {
				this.$get('/store.store/getShareList', {
					page: this.page,
					status: this.status,
				}, true, () => {
					uni.stopPullDownRefresh();
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
					uni.stopPullDownRefresh();
				})
			},

			addStaff() {
				this.$get('/store.store/signStaff', {
					mobile: this.mobile
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg)
				})
			},

			beforeDelete(item) {
				this.provider_id = item.id;
				this.show_menu = true;
			},

			onDetelePeople() {
				this.$post('/store.store/removeStaff', {
					provider_id: this.provider_id,
				}).then(res => {
					this.refreshList();
				});
			},

			refreshList() {
				this.list = [];
				this.page = 1;
				this.getStoreProviderList();
			},
			
			toDetail(item){
				this.$util.toUrl(`/pages/newstore/provider?id=${item.id}`);
			},

		},

		onLoad() {
			this.info = uni.getStorageSync('store');
			this.url_link = this.$util.getUrl(`pages/newstore/join?store_id=${this.info.id}`)
			
		},
		
		onShow() {
			this.refreshList();
		},

		onPullDownRefresh() {
			this.refreshList();
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getStoreProviderList();
			}
		}

	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		padding: 24rpx;
	}

	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;

		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}

	.store-card {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 32rpx;

		.store-info {
			overflow: hidden;

			.left {
				flex: 1;
				overflow: hidden;

				.avatar {
					width: 112rpx;
					height: 112rpx;
					background: #D8D8D8;
					border-radius: 56rpx;
					overflow: hidden;

					image {
						width: 112rpx;
						height: 112rpx;
					}
				}

				.name {
					font-weight: 600;
					font-size: 40rpx;
					color: #131313;
					line-height: 56rpx;
					max-width: 300rpx;
					margin: 0 8rpx 0 24rpx;
				}

				.certification-image {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.right {
				width: 64rpx;
				height: 64rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}

		.store-sign {
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
			margin: 24rpx 0;
		}

		.store-url {
			overflow: hidden;

			.left {
				flex: 1;
				overflow: hidden;

				text {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
				}

				view {
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
				}
			}

			.right {
				margin-left: 24rpx;

				button {
					width: 112rpx;
					height: 48rpx;
					background: #F1F1F1;
					border-radius: 12rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 48rpx;
					border: 0;
				}

				button::after {
					border: 0;
				}
			}
		}

		.store-btn {
			margin: 40rpx auto 0;

			button {
				width: 248rpx;
				height: 72rpx;
				background: #FD2A53;
				border-radius: 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
			}
		}
	}

	.list {
		.item {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-top: 20rpx;

			.user-info {
				.left {
					.avatar {
						width: 88rpx;
						height: 88rpx;
						background: #D8D8D8;
						border-radius: 44rpx;
						overflow: hidden;
						margin-right: 16rpx;

						image {
							width: 88rpx;
							height: 88rpx;
						}
					}

					.text {
						.nickname {
							text {
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
							}

							image {
								width: 32rpx;
								height: 32rpx;
								margin-left: 12rpx;
							}
							
							view {
								font-size: 24rpx;
								color: #FD2A53;
								line-height: 28rpx;
								margin-left: 12rpx;
							}
						}

						.mobile {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
						}
					}
				}

				.right {
					position: relative;
				}

			}

			.order-num {
				margin-top: 32rpx;

				.order-item {
					flex: 1;

					text {
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
					}

					view {
						font-weight: 600;
						font-size: 36rpx;
						color: #131313;
						line-height: 50rpx;
						margin-bottom: 16rpx;
					}
				}
			}

		}
	}

	.addStaff {
		width: 640rpx;
		height: 553rpx;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/add_staff_bg.png') 0 0 no-repeat;
		background-size: 100%;
		position: relative;

		input {
			font-size: 32rpx;
			color: #131313;
			width: 530rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx #DFDDF2;
			border-radius: 24rpx;
			padding: 0 32rpx;
			margin: 280rpx 0 24rpx;
			box-sizing: border-box;
		}

		.btn_view {
			width: 530rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>